<script lang="ts" setup>
import OppoAi from '@/components/icon/oppo-ai.vue'
import ColorOs from '@/components/icon/color-os.vue'
import { ref } from 'vue'
import { useWindowResize } from '@/hooks'

const viewPortHeight = ref('0px')
useWindowResize((viewPortWidth) => {
  const secondNavHeight = viewPortWidth < 1024 ? 92 : 48
  viewPortHeight.value = `${window.innerHeight - secondNavHeight}px`
})
</script>

<template>
  <div class="item1_container">
    <picture class="bg-picture">
      <source
        media="(min-width: 1536px)"
        srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-1.jpg.webp"
      />
      <source
        media="(min-width: 1024px)"
        srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-d7111.jpg.webp"
      />
      <source
        media="(min-width: 640px)"
        srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-pad-1.jpg.webp"
      />
      <img
        src="@/views/product/reno14-pro/image/1/images-ksp-kv-mo-1.jpg.webp"
        class="picture-img"
        alt=""
        loading="lazy"
      />
    </picture>

    <div class="content-item1">
      <div class="max-sm:px-[1rem] whitespace-nowrap test123">
        <oppo-ai class="w-[6.625rem] lg:w-[clamp(6.625rem,0.7843rem+9.7143cqi,8.75rem)]" />
        <p
          class="text-2xl lg:text-[clamp(1.5rem,0.1257rem+2.2857cqi,2rem)] mt-[0.375rem] mb-[0.85rem] md:mb-0"
        >
          OPPO Reno14 Pro
        </p>
        <p class="text-[2.625rem] lg:text-[clamp(2.625rem,-1.8414rem+7.4286cqi,4.25rem)]">
          放大<span class="text-[#4598F5]">此刻</span>生命力
        </p>
        <div
          class="text-lg lg:text-[clamp(1.125rem,0.0943rem+1.7143cqi,1.5rem)] mt-[1.25rem]"
          style="
            font-family:
              PingFang SC,
              serif;
          "
        >
          <p>高清长焦实况照片</p>
          <p>4K 视频转实况照片</p>
          <p>全系 IP69 满级防水</p>
        </div>
      </div>

      <picture class="sm:h-full max-sm:min-h-0">
        <source
          media="(min-width: 1536px)"
          srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-phone.png"
        />
        <source
          media="(min-width: 1024px)"
          srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-phone.png"
        />
        <source
          media="(min-width: 640px)"
          srcset="@/views/product/reno14-pro/image/1/images-ksp-kv-phone-pad.png"
        />
        <img
          class="phone-img"
          src="@/views/product/reno14-pro/image/1/images-ksp-kv-phone-mo.png"
          alt=""
          loading="lazy"
        />
      </picture>

      <color-os
        class="absolute w-[6.25rem] max-sm:bottom-[5%] sm:bottom-[10%] max-sm:left-[1rem] lg:w-[clamp(6.25rem,3.3865rem+4.4743vw,8.75rem)]"
      />
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.item1_container {
  @apply w-full relative overflow-hidden
  lg:px-[4rem];

  height: v-bind('viewPortHeight');
}

.bg-picture {
  @apply w-full h-full absolute top-0 left-0;

  .picture-img {
    @apply object-cover w-full h-full;
  }
}

.content-item1 {
  @apply @container/main max-w-[82rem] relative h-full grid
  max-sm:content-end

  sm:max-lg:mx-[1.5rem] sm:grid-cols-[auto_1fr] sm:items-center

  lg:mx-auto;

  @media (max-height: 740px) {
    .test123 {
      padding-top: clamp(1rem, 22.8571vw - 9.5714rem, 0px);
    }
  }

  .phone-img {
    @apply object-cover object-top
    max-sm:max-h-[56cqh] max-sm:w-full

    sm:max-lg:w-[76cqw] sm:max-lg:max-w-[600px]
    sm:absolute sm:top-0 sm:bottom-0 sm:right-0 sm:my-auto sm:z-10

    lg:w-[clamp(37.5rem,-11.1047rem+88.3721cqi,61.25rem)];

    @container (min-width: 1060px) {
      & {
        top: clamp(0rem, -56.975rem + 86cqi, 13.4375rem);
      }
    }
    @media (min-width: 1300px) {
      & {
        right: clamp(-10.625rem, 18.4709rem - 24.2718vw, -1.25rem);
      }
    }
  }
}
</style>
